<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#bg {
				background: url(img/bg.jpg) no-repeat center;
				background-size: cover;
				width: 100%;
				height: 100%;
				position: fixed;
			}
			img {
				width: 18px;
				height: 18px;
				position: absolute;
			}
			.glowworm{
				background: url(img/1.jpg) no-repeat center;
		</style>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript">
			onload = function(){
				function yinghuochong(){
					this.ele = $("<img src='img/1.jpg'/>");
				}
				yinghuochong.prototype = {
					//萤火虫位置
					weizhi : function(){
						this.ele.css("left",Math.round(Math.random()*$(window).width()));
						this.ele.css("top",Math.round(Math.random()*$(window).height()));
					},
					show : function(){
						//显示随机位置
						this.weizhi();
						$("#bg").append(this.ele);
						return this;
					},
					fly : function(){
						var _left = Math.round(Math.random()*$(window).width());
						var _top = Math.round(Math.random()*$(window).height());
						var _time = Math.round(Math.random()*3000)+2000;
						var $that = this;
						$that.ele.animate({left:_left,top:_top},_time,function(){
							setTimeout(function(){
								$that.fly();
							},1000)
						
						});
					}
				}
				
				var count = Math.round(Math.random()*30)+20;
				for(var i=0;i<count;i++){
					new yinghuochong().show().fly();
				}
			}
		</script>
	</head>
	<body>
		<div id="bg">
	</body>
</html>
